<template>
    <div class="get-money-container">
        <div class="money-todo">
            <div class="acea-row row-middle money-todo-item van-hairline--bottom">
                <label class="label1" for="balanceMoney">可提现</label>
                <span class="span1">￥</span><input class="input1" id="balanceMoney" type="number" v-model="balanceMoney" readonly>
            </div>
            <div class="acea-row row-middle money-todo-item van-hairline--bottom">
                <label class="label1" for="userAdmin">提现账号</label>
                <input class="input2" id="userAdmin" type="text" v-model="userAdmin" readonly>
            </div>
            <div class="acea-row row-middle money-todo-item">
                <label class="label1" for="getMoney">提现金额</label>
                <span class="span">￥</span><input class="input3" id="getMoney" type="number" v-model="getMoney" placeholder="0.00">
            </div>
        </div>
        <div class="info-text">* 提现手续费5%，从余额中扣除</div>
        <Button color="#FF8D51" :block="true" class="get-money-btn" @click="jumpPage()">确认提现</Button>
    </div>
</template>

<script>
    import { Button,Notify,Toast } from 'vant';
    import {getUserMoney} from "../api/user";
    import {getSMSCode} from "../api/public";
    import {mapGetters} from "vuex";
    import localStorage from "@utils/store/localStorage";

    export default {
        name: "GetMoney",
        components:{
            Button
        },
        data() {
            return {
                balanceMoney: 0,
                getMoney:0,
                pid:localStorage.get('creationId'),
            }
        },
        computed:{
            ...mapGetters(['userInfo']),
            userAdmin(){
              return `微信 (${this.plusxing(this.userInfo.umMobile,3,4)})`
          }
        },
        created() {
            this.getUserMoney();
        },
        methods:{
            jumpPage(){
                if (this.getMoney > this.balanceMoney) {
                    return Notify({ type: 'danger', message: '提现金额大于当前余额！' });
                }else if (this.getMoney < 1) {
                    return Notify({ type: 'danger', message: '最低提现金额需要大于1元！' });
                }else {
                    getSMSCode(this.userInfo.umMobile,'Money_Apply').then(res => {
                        if (res.code) return Toast(res.msg)
                    })
                    this.$router.push({name:'VerifyCode',params:{getMoney:this.getMoney}})
                }
            },
            getUserMoney(){
                getUserMoney(this.userInfo.umId,this.pid).then(res => {
                    this.balanceMoney = res.data.umRemainingSum
                })
            },
            plusxing: function (str, frontLen, endLen) {
                let len = str.length - frontLen - endLen;
                let xing = '';
                for (let i = 0; i < len; i++) {
                    xing += '*';
                }
                return str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
            }
        }
    }
</script>

<style scoped lang="scss">
    .get-money-container {
        overflow: hidden;
        .money-todo {
            width: 345px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            margin: 15px;
            padding: 0 20px;

            .money-todo-item {
                height: 60px;
                .span1{
                    margin-left: 45px;
                    color:rgba(255,141,81,1);
                    font-size:16px;
                    font-weight:500;
                }
                .span{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(66,69,95,1);
                    margin-left: 30px;
                }
                .label1{
                    font-size:16px;
                    font-weight:400;
                    color:rgba(66,69,95,1);
                }
                .input1{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(255,141,81,1);
                    flex: 1;
                    width: 165px;
                }
                .input2{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(66,69,95,1);
                    flex: 1;
                    width: 165px;
                    margin-left: 30px;
                }
                .input3{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(66,69,95,1);
                    flex: 1;
                    width: 165px;
                }
            }
        }
        .info-text{
            font-size:14px;
            font-weight:400;
            color:rgba(163,165,177,1);
            text-align: center;
            margin-top: 10px;
        }
        .get-money-btn{
            width:305px;
            height:50px;
            border-radius:6px;
            margin: 40px auto;
        }
    }
</style>
